<script setup lang="ts">
import { Check, Close } from '@element-plus/icons-vue'
import { sample } from 'lodash-es'
import type { Action } from 'element-plus'
import { SearchForm } from './components'
import { defaultPagingParams } from './index'
import { PAGING } from '@/constant'
import type { TableColumn } from '@/types'
// ------------------use------------------
// #region
const { globalProperties } = useCurrentInstance()
const { withLoading, loading } = useDefineLoading()
const [tableData, setTableData] = useState<any[]>([])
const [pagingParams, setPagingParams] = useState<any>({
  ...defaultPagingParams,
})
const [total, setTotal] = useState<number>(0)
// #endregion
// ------------------静态变量------------------
// #region
const columns: TableColumn<any>[] = [
  {
    key: uuid(),
    type: 'index',
    width: '80',
    label: '序号',
  },
  {
    key: uuid(),
    label: '能源类型',
    render() {
      return '水'
    },
  },
  {
    key: uuid(),
    label: '能源消耗',
    render() {
      return (
        Math.floor(Math.random() * 100) + 100
      ).toFixed(2)
    },
  },
  {
    key: uuid(),
    label: '状态',
    render() {
      const success = h(
        'span',
        {
          class: 'text-green',
        },
        '审核通过',
      )
      const info = h(
        'span',
        {
          class: 'text-info',
        },
        '未审核',
      )
      const warn = h(
        'span',
        {
          class: 'text-red',
        },
        '审核不通过',
      )
      return sample([success, warn, info])
    },
  },
  {
    key: uuid(),
    label: '时间',
    render() {
      return formatTime(Date.now(), 'YYYY-MM')
    },
  },
  {
    key: uuid(),
    label: '备注',
    render() {
      return '我是备注内容。。'
    },
  },
  {
    key: uuid(),
    label: '驳回',
    render() {
      return '不合适'
    },
  },
]
// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region
// #endregion
// ------------------生命周期------------------
// #region
onMounted(() => {
  getTableData()
})
// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
async function getTableData() {
  await withLoading(sleep)(1000)

  setTotal(30)
  setTableData(Array.from({ length: 30 }).fill({}))
}
async function addOrUpdateData(row: any) {
  await sleep(1000)
  getTableData()
  globalProperties.$message.success(
    `${row.id ?? ''}数据更新成功！`,
  )
}
/** 重置 */
function reset() {
  setPagingParams({ ...defaultPagingParams })
  getTableData()
}
function search() {
  getTableData()
  Object.assign(pagingParams.value, PAGING.PARAMS)
}
/** 通过 */
async function adopt(id: number) {
  const res: Action = await globalProperties.$confirm(
    '确定通过该数据填报？',
    '提示',
    {
      type: 'warning',
    },
  )
  if (res !== 'confirm')
    return
  addOrUpdateData({ id, auditStatus: 1, rejectReason: '' })
}
/** 驳回 */
async function reject() {
  try {
    await globalProperties.$prompt(
      '请输入驳回原因！',
      '驳回',
      {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        type: 'warning',
        inputValidator: (val: string) => {
          val?.trim?.()
          if (!val) {
            return '原因不能为空!'
          }
          else if (val.length < 6) {
            return '文字内容不应少于6个！'
          }
          return true
        },
      },
    )
  }
  catch (error) {}
}
// #endregion
</script>

<template>
  <div
    class="padding-sm flex-direction flex align-end container"
  >
    <view-table
      :loading="loading"
      :columns="columns"
      :data="tableData"
    >
      <template #actions>
        <SearchForm @search="search" @reset="reset" />
      </template>
      <template #operate="{ row }">
        <TdButton
          title="通过"
          :icon="Check"
          type="success"
          @click="adopt(row.id)"
        />
        <el-divider direction="vertical" />
        <TdButton
          title="驳回"
          :icon="Close"
          type="danger"
          @click="reject"
        />
      </template>
    </view-table>

    <!-- 分页 -->
    <ListsPagination
      v-model:page-num="pagingParams.pageNumber"
      v-model:page-size="pagingParams.pageSize"
      :total="total"
      @current-change="getTableData"
      @size-change="getTableData"
    />
  </div>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
